<template>
    <h1>这是一个vuex页</h1>
    <p>count:{{ count }}</p>
    <p>tenTimes:{{ tenTimes }}</p>
     <h1>Vuex module</h1>
    <button @click="commitIncreaseA">触发-moduleA-muations</button>
    <button @click="commitAsyncIncreaseA">触发-moduleA-actions</button>
    <button @click="commitIncreaseB">触发-moduleB-muations</button>
    <button @click="commitAsyncIncreaseB">触发-moduleB-actions</button>

    <h1>命名空间</h1>
    <p>无命名空间</p>
    <p>访问 模块A中的state数据: {{ $store.state.a.countA }}</p>
    <p>访问 模块A中的getter数据: {{ $store.getters.countAA }}</p>
    <p>有命名空间</p>
    <p>访问 模块B中的state数据: {{ $store.state.b.countB }}</p>
    <p>访问 模块B中的getter数据: {{ $store.getters['b/countBB'] }}</p>

    <h1>MapXX 方法</h1>
    <h2>全局</h2>
    <p>state</p>
    <p>count:{{ count }}</p>
    <p>getter</p>
    <p>tenTimes:{{tenTimes}}</p>
    <p>countAA:{{countAA}}</p>
    <p>Mutation</p>
    <button @click="enitIncreamentMut">触发incrementMut</button>
    <button @click="increaseA">触发increaseA</button>
    <p>actions</p>
    <button @click="enitIncreamentAct">触发incrementAct</button>
    <button @click="asyncIncreasedA">触发asyncIncreasedA</button>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    computed:{
        // count(){
        //     return this.$store.state.count
        // },
        // tenTimes(){
        //     return this.$store.getters.tenTimes
        // }
        //映射全局state
        ...mapState(['count']),
        //映射全局getter
        ...mapGetters(['tenTimes','countAA'])
    },
    methods:{
        ...mapMutations(['incrementMut','increaseA']),
        enitIncreamentMut(){
            this.incrementMut({count:40})
        },
        ...mapActions(['incrementAct','asyncIncreasedA']),
        enitIncreamentAct(){
            this.incrementAct({count:400})
        }
        // incrementMut(state,playload){
        //     //更新state
        //     state.count = playload.count
        // }
        // incrementAct(context,playload){
        //     setTimeout(()=>{
        //         context.commit('incrementMut',playload)
        //     },3000)
        // }
    }
}
</script>